<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${wbeParameter.name}">登录</title>
    <link rel="shortcut icon" href="" type="image/x-icon">
    <link rel="stylesheet" charset="utf-8" href="/resource/js/front/reset.css">
    <link rel="stylesheet" charset="utf-8" href="/resource/js/front/reg.css">
    <link rel="stylesheet" href="/resource/js/front/index.css">
</head>
<body>
<div class="login_header">
    <div class="header_center clearfix">
        <div class="myfl">
            <a href="/front/index.do" th:text="${wbeParameter.name}" style="color:#3e94ed;"></a>
            <span>欢迎登陆</span>
        </div>
        <div class="myfr">
            <a href="/front/index.do">返回首页</a><span></span>
        </div>
    </div>
</div>
<div class="login_content clearfix" th:style="${'background:url('+wbeParameter.backgroundImg+') no-repeat 0 138px'}">
    <input type="hidden" id="memberType" value=""/>
    <div action="/login" method="post" class="layui-form">
        <input type="hidden" name="memberType" id="parameter" value="1"/>
        <div class="login_box myfr">
            <p class="tabchange clearfix">
                <h2 class="myfl_del sign_select" id="usertype">用户登录</h2>
            </p>
            <p class="system_error"></p>
            <input type="text" name="userName" value="" placeholder="用户名" id="userName" lay-verify="required|userName"
                   class="layui-input"/>
            <input type="password" placeholder="登录密码" id="password" name="password" maxlength="16"
                   style="margin-top: 20px" lay-verify="required|pass" class="layui-input" value=""/>
            <!--  <p class="forget_password clearfix"><a href="" class="myfr">忘记密码？</a></p>-->
            <div class="photo_code clearfix" style="margin-top: 20px">
                <input type="text" class="myfl" name="vercode" lay-verify="required|vercodes" class="layui-input"
                       placeholder="请输入图片验证码" style="width: 60%"/>
                <span src="" class="myfr zylVerCode" id="discode" onclick="createCode()"
                      style="margin-right: 10px;margin-top: 20px"></span>
            </div>
            <input type="submit" value="立即登录" lay-submit="" lay-filter="demo1" class="submit_btn">
            <p class="entry_mode clearfix">
                <a href="/reg" class="myfr">
                    <i>没有账号？立即注册</i>
                </a>
                <!--<a class="retrieve" style="float: left">-->
                <!--<i>找回密码</i>-->
                <!--</a>-->
            </p>
        </div>
    </div>
</div>
<!-- Jquery Js -->
<script src="/resource/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!-- Layui Js -->
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>

<script>
    layui.use(['carousel', 'form', 'layer'], function () {
        var carousel = layui.carousel
            , form = layui.form
            , layer = layui.layer;

        //自定义验证规则
        form.verify({
            userName: function (value) {
                if (value.length < 5) {
                    return '账号至少得5个字符';
                }
            }
            , pass: [/^[\S]{1,12}$/, '密码必须6到12位，且不能出现空格']
            , vercodes: function (value) {
                //获取验证码
                var zylVerCode = $(".zylVerCode").html();
                if (value != zylVerCode) {
                    return '验证码错误!';
                }
            }
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        $('.retrieve').on("click", function () {
            layer.open({
                type: 2,
                title: "找回密码",
                shadeClose: false, //点击遮罩关闭层
                area: ['500px', '278px'],
                content: "/retrieve.do"
            });
        })
        //监听提交
        form.on('submit(demo1)', function (data) {
            $.ajax({
                url: '/loginNormal.do',
                type: 'post',
                dataType: 'json',
                data: data.field,
                async: false,
                success: function (result) {
                    console.log(result)
                    if (result.status) {
                        location.href = "/indexShiro";
                    } else {
                        layer.msg(result.msg, {time: 2000});
                    }
                }

            });
        });
    });
</script>
<!--验证码-->
<script language="javascript">
    var code; //在全局 定义验证码
    $(function () {
        createCode()
    })

    function createCode() { //创建验证码函数
        code = "";
        var codeLength = 4;//验证码的长度
        var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
            'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');//所有候选组成验证码的字符，当然也可以用中文的
        for (var i = 0; i < codeLength; i++) {
            var charIndex = Math.floor(Math.random() * 36);
            code += selectChar[charIndex];
        }
// 设置验证码的显示样式，并显示
        document.getElementById("discode").style.fontFamily = "Fixedsys"; //设置字体
        document.getElementById("discode").style.letterSpacing = "10px"; //字体间距
        document.getElementById("discode").style.color = "#3e94ed"; //字体颜色
        document.getElementById("discode").innerHTML = code; // 显示
    }

</script>
</body>
</html>



